<template>
	<div class="demo">
		<h2>{{msg}}</h2>
		<h3>学生姓名:{{name}}</h3>
		<h3>学生性别:{{sex}}</h3>
		<h3>学生年龄:{{age+10}}</h3>
		<h3>求和:{{number}}</h3>
		<button @click="add">点我求和++</button>
		<button @click="sendStudentName">把学生名给App</button>
		<button @click="unbind">解绑sx事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'student',
		data(){
			return {
				msg:'欢迎学校Vue!!!!!',
				name:'张三',
				sex:'男',
				age:22,
				number:10
			};
		},
		//props:['name','sex','age'] ,//简单声明接收
		// 接收的同时对数据进行类型限制
		// props:{
		// 	name:String,
		// 	sex:String,
		// 	age:Number
		// }
		// 接收的同时对数据:进行类型限制+默认值的指定+必要行的限制
		// props:{
		// 	name:{
		// 		type:String,
		// 		required:true
		// 	},
		// 	age:{
		// 		type:Number,
		// 		default:99
		// 	},
		// 	sex:{
		// 		type:String,
		// 		required:true
		// 	}
		// },
		methods:{
			add(){
				console.log('student add 被调用了');
				this.number++;
			},
			sendStudentName(){
				// 触发Student组件实例身上的sx事件
				this.$emit('sx',this.name)
				//this.$emit('click')
				//this.$emit('demo')
			},
			unbind(){
				// 解绑一个自定义事件
				this.$off('sx');
				// 解绑多个自定义事件
				//this.$off(['sx','demo']);
				// 解绑所有的自定义事件
				//this.$off()
			},
			death(){
				// 销毁了当前Student组件的实例
				// 销毁后所有Student实例的自定义事件全部不奏效了
				this.$destroy()
			}
		}
	};
</script>

<style scoped>
	.demo{
		background-color: skyblue;
	}
</style>